<script setup lang="ts">
import { groupBy, toggleArrayItem } from '@/stores/util'
import { watchEffect, ref } from 'vue'
import { type Kongfu, getKongfuList, dLv, dMenpai, dTypes, dWuxing, mMen2Wux } from '@/stores/taiwu'
import { RouterLink } from 'vue-router'

const allKongs: Kongfu[] = []
const dKongs = ref<Kongfu[]>([])
const dKongsGroup = ref<Record<string, Kongfu[]>>({})
const fMen = ref<string[]>([])
const fType = ref<string[]>([])
const fLv = ref<number[]>([])
const filter = {
  toggleLv: function (val: number) {
    if (val === 0) {
      fLv.value = []
      return;
    }
    toggleArrayItem(fLv.value, val)
  },
  toggleMen: function (val: string) {
    toggleArrayItem(fMen.value, val)
  },
  toggleType: function (val: string) {
    if (val === '') {
      fType.value = []
      return;
    }
    toggleArrayItem(fType.value, val)
  },
  setMenByWuxing: function (val: string) {
    if (val === Object.keys(dWuxing)[0]) { // 混元
      fMen.value = []
      return;
    }
    for (const [k, v] of Object.entries(mMen2Wux)) {
      if (v === val) {
        toggleArrayItem(fMen.value, k)
      }
    }
  },
  reload: function (ls: Kongfu[]) {
    dKongs.value = ls
    dKongsGroup.value = groupBy(dKongs.value, e => e.mpai + "·" + e.type)
  }
}

watchEffect(() => {
  let res = allKongs
  if (fMen.value.length > 0) {
    res = res.filter(e => fMen.value.includes(e.mpai))
  }
  if (fType.value.length > 0) {
    res = res.filter(e => fType.value.includes(e.type))
  }
  if (fLv.value.length > 0) {
    res = res.filter(e => fLv.value.includes(e.lvNo))
  }
  filter.reload(res)
})

watchEffect(async () => {
  const all = await getKongfuList(document)
  allKongs.push(...all)
  filter.reload(allKongs)
})

</script>

<template>
  <div class="flex flex-col gap-2">
    <nav class="flex flex-col gap-2">
      <div class="flex flex-row gap-2">
        <div class="text-base bg-gray-200 pd12 rounded">五行</div>
        <div class="flex flex-row grow">
          <div class="flex flex-row gap-3">
            <button type="button" v-for="(ii, name) in dWuxing" :key="ii" class="pd12 rounded cursor-pointer"
              v-on:click="filter.setMenByWuxing(name + '')" :class="`tw-lv lv${ii}`">{{
                name
              }}
            </button>
          </div>
        </div>
        <div>
          <RouterLink to="/tw/tech" class="tw-lv lv8 rounded pd12">技艺</RouterLink>
        </div>
      </div>
      <div class="flex flew-row gap-2">
        <div class="text-base bg-gray-200 pd12 rounded">
          <a target="_blank" class="hover:underline hover:underline-offset-4"
            href="https://taiwu.huijiwiki.com/wiki/门派">门派</a>
        </div>
        <div class="flex flex-row gap-3 grow">
          <button type="button" v-for="(arr, ii) in dMenpai" :key="ii"
            class="pd12 rounded cursor-pointer outline-offset-2"
            :class="`tw-lv lv${arr[1]} ${fMen.includes(arr[0]) ? 'outline-2' : 'outline-none'}`"
            v-on:click="filter.toggleMen(arr[0])">{{
              arr[0] }}
          </button>
        </div>
      </div>
      <div class="flex flew-row gap-2">
        <div class="text-base bg-gray-200 pd12 rounded">武功</div>
        <div class="flex flex-row gap-3 grow">
          <button type="button" class="pd12 rounded cursor-pointer tw-lv lv8"
            v-on:click="filter.toggleType('')">〇</button>
          <button type="button" v-for="item in dTypes" :key="item"
            class="pd12 rounded tw-lv lv8 cursor-pointer outline-offset-2 outline-red-600"
            :class="` ${fType.includes(item) ? 'outline-3' : 'outline-none'}`" v-on:click="filter.toggleType(item)">{{
              item }}</button>
        </div>
      </div>
      <div class="flex flew-row gap-2">
        <div class="text-base bg-gray-200 pd12 rounded">品级</div>
        <div class="flex flex-row gap-3 grow">
          <button type="button" class="pd12 rounded cursor-pointer tw-lv lv9" v-on:click="filter.toggleLv(0)">··{{
            dKongs.length }}··</button>
          <button type="button" v-for="(item, ii) in dLv" :key="ii"
            class="pd12 rounded cursor-pointer outline-offset-2 outline-gray-800"
            :class="`tw-lv lv${ii + 1} ${fLv.includes(ii + 1) ? 'outline-2' : 'outline-none'}`"
            v-on:click="filter.toggleLv(ii + 1)">{{
              item[0]
            }}
          </button>
        </div>
      </div>
    </nav>
    <div class="flex flex-col bg-[#23211e] text-gray-100 p-2 gap-2 rounded" v-for="(arr, ii) in dKongsGroup" :key="ii">
      <div class="text-center text-2xl font-bold">{{ ii }}</div>
      <div class="grid grid-cols-3 gap-2 rounded justify-center">
        <div v-for="item in arr" :key="item.title" class="py-1 px-1 border rounded border-gray-300 flex flex-col gap-1">
          <p class="pl-1">
            <span class=""> {{ item.mpai }} </span>
            <span :class="`tw-lv lv${item.lvNo}`" class="px-1 border inline-block mx-1">
              {{ item.lv }} {{ item.title }}
            </span>
            <span class="px-1" :class="`tw-lv lv${dWuxing[item.wuxing]}`">{{ item.wuxing }}·{{ item.type }} </span>
            <a :class="`tw-lv lv${item.lvNo}`" target="_blank" class="float-right px-1"
              :href="`https://taiwu.huijiwiki.com/wiki/功法/${item.title}`">Wiki</a>
          </p>
          <p class="pl-1">{{ item.slot }}</p>
          <p class="pl-1">{{ item.required }}</p>
          <p class="pl-1">{{ item.debuff }}</p>
          <p class="pl-1">{{ item.poison }}</p>
          <div class="flex flex-col gap-1 px-1">
            <p class="tw-lv lv6">
              {{ item.obverse }}
            </p>
            <p class="tw-lv lv1">
              {{ item.reverse }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
